<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Jpetstore后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <script src="../js/index.js"></script>

    <!-- 在线导入 -->
    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <!-- 本地导入 -->

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>



</head>
<body>
<div id="app">

    <el-container style="height: 100%">
        <el-aside width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); height: 100%">
            <el-menu :default-openeds="['1', '3']" style="height: 100%"
                     background-color="rgb(48,65,86)"
                     text-color="#fff"
                     :collapse="isCollapse"
            >
                <div style="height: 60px;line-height: 60px;text-align: center">、
                    <img src="/images/logo-topbar.gif">
                </div>

                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-s-home"></i>
                        <span slot="title">查看首页</span></template>
                    <el-menu-item index="1-1" @click="handleMainFormClick">首页信息</el-menu-item>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-shopping-cart-full"></i>
                        <span slot="title">商品管理</span>
                    </template>
                    <el-menu-item-group title="分类选择">


                        <el-menu-item index="1-1-1" @click="handleCategory">分类选择</el-menu-item>



                    </el-menu-item-group>
                    <el-menu-item-group title="全部商品">
                        <el-menu-item index="1-2" @click="handleAllItem">全部商品</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>
                        <span slot="title">账户管理</span></template>
                    <el-menu-item index="2-1" @click="handleAccountClick">所有账户</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-setting"></i>
                        <span slot="title">个人中心</span></template>
                    <el-menu-item-group>
                        <template slot="title">个人中心</template>
                        <el-menu-item index="3-1" @click="handlePersonClick">个人中心</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title"><i class="el-icon-s-goods"></i>
                        <span slot="title">订单管理</span></template>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container >
            <el-header style=" font-size: 12px; display: flex">
                <div style="flex:1;font-size: 18px; width: 200px">
                    <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
                </div>
                <div style="flex:1.2;font-size: 25px">
                    <b style="color: black">Jpetstore后台管理系统</b>
                </div>
                <el-dropdown>
                    <i class="el-icon-arrow-down"></i>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>
                <span>朱阳</span>
            </el-header>
            <el-main>
                <b style="font-size: 30px">Welcome to Pet Store Backstage Management System!</b>
                <br><br><br>
                <b class="el-icon-user-solid" style="font-size: 20px">Who Are We?</b>

                <br><br><br>
                <div style="line-height: 1.8;">
                The Pet Store Backstage Management System is a vital tool for efficiently managing the operations of a pet store behind the scenes. It serves as the nerve center for organizing, monitoring, and optimizing various aspects of the business, ensuring seamless operations and exceptional customer service.

                At its core, the system offers comprehensive functionalities tailored to the specific needs of pet store management. From inventory management to sales tracking, employee scheduling, and customer relations, it provides a centralized platform to streamline all essential tasks.

                One of the key features of the system is inventory management.
                </div>
                <br><br><br>
                <b class="el-icon-edit" style="font-size: 20px">What Can We Do?</b>
<br><br><br>
                <div style="line-height: 1.8;">
                Pet stores deal with a diverse range of products, including pet food, accessories, toys, and healthcare products. The backstage management system allows store managers to track inventory levels in real-time, monitor stock movements, and generate automatic alerts for low stock levels. This ensures that the store always has the right products available to meet customer demands.

                Sales tracking is another critical component of the system. It enables managers to monitor sales performance, analyze trends, and identify popular products. By having access to detailed sales reports and analytics, store owners can make informed decisions regarding product pricing, promotions, and marketing strategies to maximize revenue.

                Employee scheduling is simplified through the backstage management system, allowing managers to create and manage employee schedules effortlessly. With features like shift management, time tracking, and task assignment, managers can ensure optimal staffing levels at all times, minimizing understaffing or overstaffing situations.

                Moreover, the system facilitates customer relations by storing customer information, purchase history, and preferences. This enables personalized interactions with customers, such as targeted marketing campaigns, loyalty programs, and customized product recommendations, fostering long-term customer relationships and enhancing customer satisfaction.

                In addition to these core functionalities, the Pet Store Backstage Management System may include features such as supplier management, financial reporting, and integration with e-commerce platforms for online sales. By incorporating these advanced capabilities, the system provides a comprehensive solution to address the diverse needs of modern pet store management.

                In conclusion, the Pet Store Backstage Management System plays a crucial role in optimizing the operations of pet stores, improving efficiency, enhancing customer service, and driving business growth. With its robust features and user-friendly interface, it empowers store managers to effectively manage every aspect of their business, ensuring success in today's competitive pet retail industry.

                In the following years,more and more people are chosing to use JpetStore,just like this:
                </div>
<div style="display: flex; align-items: center;">
    <div style="flex: 10px">
                <div>
                    <el-progress :text-inside="true" :stroke-width="22" :percentage="14" status="exception" style="display: inline-block; margin-top: 10px; width: 500px;"></el-progress>
                    <span style="display: inline-block;">2016</span>
                </div>
                <div>
                    <el-progress :text-inside="true" :stroke-width="22" :percentage="30"  status="warning"style="display: inline-block; margin-top: 10px; width: 500px;"></el-progress>
                    <span style="display: inline-block;">2018</span>
                </div>
                <div>
                    <el-progress :text-inside="true" :stroke-width="22" :percentage="45"  status="waring"style="display: inline-block; margin-top: 10px; width: 500px;"></el-progress>
                    <span style="display: inline-block;">2020</span>
                </div>
                <div>
                    <el-progress :text-inside="true" :stroke-width="22" :percentage="70"  style="display: inline-block; margin-top: 10px; width: 500px;"></el-progress>
                    <span style="display: inline-block;">2022</span>
                </div>
                <div>
                    <el-progress :text-inside="true" :stroke-width="22" :percentage="90"  status="success"style="display: inline-block; margin-top: 10px; width: 500px;"></el-progress>
                    <span style="display: inline-block;">2024</span>
                </div>
    </div>
    <div style="flex: 20px">
                <el-progress type="circle" :percentage="0"></el-progress>
                <el-progress type="circle" :percentage="25"></el-progress>
                <el-progress type="circle" :percentage="100" status="success"></el-progress>
                <el-progress type="circle" :percentage="70" status="warning"></el-progress>
                <el-progress type="circle" :percentage="50" status="exception"></el-progress>

    </div>

</div>



                <br><br>
                <div style="display: flex">
                    <div>
                        <b style="font-size: 20px" class="el-icon-phone-outline">How TO Contact Us </b>
                        <br><br><br>
                        0632-923372347    Miss Li
                        <br>

                        0731-312123124    Mr Wang
                        <br>
                        0731-124712742    Mrs Zhang
                    </div>
                    <div>
                        <img src="../images/5.svg" style="margin-left: 800px ;width:250px" >
                    </div>

                </div>

            </el-main>

        </el-container>
    </el-container>
</div>



<script type="text/javascript">


    new Vue({
        el:"#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };

            return {
                // tableData: Array(10).fill(item),
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,


            }
        },
        methods: {
            collapse() {
                this.isCollapse = !this.isCollapse; // Toggle the value of isCollapse
                if (this.sideWidth) {
                    this.sideWidth = 64
                    // this.collapseBtnClass='el-icon-s-unfold'
                }
            },
            handleAccountClick(){
                window.location.href = "account.html";
            },
            handleMainFormClick(){
                window.location.href="main.html";
            },
            handleCategory(){
                window.location.href="category.html";
            },
            handleAllItem(){
                window.location.href="allitem.html";
            },
            handlePersonClick(){
                window.location.href="person.html"
            }

        }




    })
</script>

</body>
</html>